<script
  lang="ts"
  setup
>
import dayjs from '#build/dayjs.imports.mjs'
import { getActData, getCategoryList, getCompetitionActivity, getFloodListData, getHealthBigData, getHealthData, getHealthSX, getHealthworks, getLectureData, getLiveData, getOnlineLive, getSurveyActivity, getxchdList } from '~/api/home'

const title = ref('宣传活动')
const routePath = [{ name: '首页', path: '/' }, { name: title }]
const total = ref(0)
const infoType = ref('西安地情')

const infocss = 'background:linear-gradient(88.92deg, rgba(92,224,168,0.41) 1.07%,rgba(195,228,214,0.22) 99.94%);padding-left:10px'
const bg1 = `background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);`
const queryParams = reactive({
  page: {
    pageNo: 1,
    rownumber: 10,
  },
},

)
const currentList = ref<any[]>([])
const currentName = ref('')

// 分页参数更改
async function onPageChange(params: { pageNum: number, pageSize: number }) {
  queryParams.page.pageNo = params.pageNum
  // queryParams.pageSize = params.pageSize
  //   getList()
  let res
  switch (currentName.value) {
    case '社区活动':
      res = await getActData(queryParams)
      break
    case '论坛讲座':
      res = await getLectureData(queryParams)
      break
    case '问卷调查':
      res = await getSurveyActivity(queryParams)
      break
    case '知识竞答':
      res = await getCompetitionActivity(queryParams)
      break
    case '在线直播':
      res = await getLiveData(queryParams)
      break
    case '卫生宣传日':
      res = await getHealthData(queryParams)
      break
    case '职业健康作品征集大赛':
      res = await getHealthworks(queryParams)
      break
    case '知汛防汛':
      res = await getFloodListData(queryParams)
      break
    case '健康陕西行动知行大赛':
      res = await getHealthBigData(queryParams)
      break
    default:
      break
  }
  if (res) {
    currentList.value = res.data.map((item) => {
      return {
        title: item.key_work,
        blurd: extractTextFromPTags(item.contents),
        info: item.publisher,
        time: dayjs(item.release_time).format('YYYY-MM-DD'),
        url: getImgUrl(item.activity_image || item.cover_file_name, true),
        Id: item.id,
        no: item.activity_no,
        status: item.status,
        activity_no: item.activity_no,
        perm_type: item.perm_type,
      }
    })
    total.value = res.page.total
  }
  else {
    currentList.value = []
    total.value = 0
  }
}
async function typeClick(item: any, type: any) {
  infoType.value = type
  currentName.value = item
  currentList.value = []
  total.value = 0
  let res
  switch (currentName.value) {
    case '社区活动':
      res = await getActData(queryParams)
      break
    case '论坛讲座':
      res = await getLectureData(queryParams)
      break
    case '问卷调查':
      res = await getSurveyActivity(queryParams)
      break
    case '知识竞答':
      res = await getCompetitionActivity(queryParams)
      break
    case '在线直播':
      res = await getLiveData(queryParams)
      break
    case '卫生宣传日':
      res = await getHealthData(queryParams)
      break
    case '职业健康作品征集大赛':
      res = await getHealthworks(queryParams)
      break
    case '知汛防汛':
      res = await getFloodListData(queryParams)
      break
    case '健康陕西行动知行大赛':
      res = await getHealthBigData(queryParams)
      break
  }
  if (res) {
    currentList.value = res.data.map((item) => {
      return {
        title: item.key_work || item.title,
        blurd: extractTextFromPTags(item.contents) || extractTextFromPTags(item.remark),
        info: item.publisher || item.modify_user,
        time: dayjs(item.release_time || item.modify_time).format('YYYY-MM-DD'),
        url: getImgUrl(item.activity_image || item.cover_file_name, true),
        Id: item.id,
        type: item.name,
        status: item.status,
        activity_no: item.activity_no,
        perm_type: item.perm_type,
      }
    })
    total.value = res.page.total
    getSiderdata()
  }
  else {
    currentList.value = []
    total.value = 0
  }
}
const CommunityEventLists = ref<any[]>([])// 社区活动
const cathedraList = ref<any[]>([])// 讲座
const questionnaireList = ref<any[]>([])// 问卷调查
const knowledgecontestList = ref<any[]>([])// 知识竞答
const OnlieliveList = ref<any[]>([])// 在线直播
const HealthpromotionList = ref<any[]>([])// 卫生宣传
const occupationalhealthList = ref<any[]>([])// 职业健康
const floodList = ref<any[]>([])// 知汛防汛
const hegthBigdata = ref<any[]>([])
const mockData = ref([
  { name: '社区活动', data: CommunityEventLists },
  { name: '论坛讲座', data: cathedraList },
  { name: '问卷调查', data: questionnaireList },
  { name: '知识竞答', data: knowledgecontestList },
  { name: '在线直播', data: OnlieliveList },
  { name: '卫生宣传日', data: HealthpromotionList },
  { name: '知汛防汛', data: floodList },
  { name: '健康陕西行动知行大赛', data: hegthBigdata },
  { name: '职业健康作品征集大赛', data: occupationalhealthList },
])
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}
async function getdata() {
  const queryParamsone = { page: { pageNo: 1, rownumber: 3 } }
  const res = await getActData(queryParamsone)

  CommunityEventLists.value = res.data
  const res1 = await getLectureData(queryParamsone)
  cathedraList.value = res1.data
  const res2 = await getSurveyActivity(queryParamsone)
  questionnaireList.value = res2.data
  const res3 = await getCompetitionActivity(queryParamsone)
  knowledgecontestList.value = res3.data
  console.log('res4', res2, res3)
  const res4 = await getLiveData(queryParamsone)

  OnlieliveList.value = res4.data
  const res5 = await getHealthData(queryParamsone)
  HealthpromotionList.value = res5.data
  const res6 = await getHealthworks(queryParamsone)
  occupationalhealthList.value = res6.data
  const res7 = await getFloodListData(queryParamsone)
  floodList.value = res7.data
  const res8 = await getHealthBigData(queryParamsone)
  hegthBigdata.value = res8.data

  mockData.value.forEach((element) => {
    if (element.data && element.data.length) {
      element.data = element.data?.map((item) => {
        return {
          title: item.key_work || item.title,
          blurd: extractTextFromPTags(item.contents) || extractTextFromPTags(item.remark),
          info: item.publisher || item.modify_user,
          time: dayjs(item.release_time || item.modify_time).format('YYYY-MM-DD'),
          url: getImgUrl(item.activity_image || item.cover_file_name || '', true),
          Id: item.id,
          no: item.activity_no,
          type: element.name,
          perm_type: item.perm_type,
        }
      })
    }
    else {
      element.data = []
    }
  })
}
const router = useRouter()
function toDetail(item: any) {
  console.log('item2', item, item.type === '问卷调查')
  if (item.type === '问卷调查') {
    navigateTo({
      path: '/peopleHealth/questSurvey',
      query: {
        title: item.title,
        no: item.no || item.activity_no,
      },
    })
    // router.push({ path: `/peopleHealth/questSurvey`, query: { no: item.no || item.activity_no } })
  }
  else {
    if (currentName.value === '问卷调查') {
      navigateTo({
        path: '/peopleHealth/questSurvey',
        query: {
          title: item.title,
          no: item.no || item.activity_no,
        },
      })
    // router.push({ path: `/peopleHealth/questSurvey`, query: { no: item.no || item.activity_no } })
    }
    else {
      if (currentName.value)
        router.push({ path: `/peopleHealth/HealthActivityDetail/${item.Id}&${currentName.value}` })
      else router.push({ path: `/peopleHealth/HealthActivityDetail/${item.Id}&${item.type}` })
    }
  }
}

function toDetailnew(id: any, namse: string, item: any) {
  console.log('id', id, namse, item)
  currentName.value = namse
  debugger
  if (namse === '知识竞答' || namse === '问卷调查') {
    if (item?.status && item?.status !== '进行中') {
      return ElMessage.warning(`该活动${item.status}，无法参与`)
    }
    if (item?.perm_type === '登录访问') {
      const { isLogin } = useUserStore()
      if (!isLogin) {
        ElMessage.warning(`该${namse}活动需要登录访问,请先登录`)
        return
      }
    }
    navigateTo({
      path: '/peopleHealth/questSurvey',
      query: {
        title: item?.title || '',
        no: id,
      },
    })
    // router.push({ path: `/peopleHealth/questSurvey`, query: { no: id } })
  }
  else {
    router.push({ path: `/peopleHealth/HealthActivityDetail/${id}&${currentName.value}` })
  }
}
function godetaillast(id: any, namse: string) {
  router.push({ path: `/peopleHealth/HealthActivityDetail/${id}&${namse}` })
}
const siderData = ref()
async function getSiderdata() {
  const paramss = {
    page: {
      rownumber: 5,
      pageNo: 1,
    },
    condition: [{
      colName: 'column_recommendation',
      ruleType: 'eq',
      value: '是',
    }],
    order: [{
      colName: 'release_time',
      orderType: 'desc', // asc升序 desc降序
    }],

    positions: '首页',
  }
  let res2
  if (!currentName.value) {
    res2 = await getxchdList(paramss)
  }
  else {
    switch (currentName.value) {
      case '社区活动':
        res2 = await getActData(paramss)
        break
      case '论坛讲座':
        res2 = await getLectureData(paramss)
        break
      case '问卷调查':
        res2 = await getSurveyActivity(paramss)
        break
      case '知识竞答':
        res2 = await getCompetitionActivity(paramss)
        break
      case '在线直播':
        res2 = await getLiveData(paramss)
        break
      case '卫生宣传日':
        res2 = await getHealthData(paramss)
        break
      case '职业健康作品征集大赛':
        res2 = await getHealthworks(paramss)
        break
      case '知汛防汛':
        res2 = await getFloodListData(paramss)
        break
      case '健康陕西行动知行大赛':
        res2 = await getHealthBigData(paramss)
      default:
        break
    }
  }

  siderData.value = res2?.data
}
async function backInit() {
  location.reload()
}
let onlivedata = reactive({})
async function getliveOnline() {
  const res = await getOnlineLive()
  console.log('ree22222', res)

  onlivedata = res
}
const currentOnlivepagenum = ref(1)
onMounted(async () => {
  getdata()
  getSiderdata()
  const res = await getCategoryList({
    condition: [{
      colName: 'path_name',
      ruleType: 'like',
      value: '宣传活动',
    }],
  })
  console.log('res', res)
  mockData.value.splice(res.data[0].children.length)
  res.data[0].children.forEach((item, index) => {
    console.log(item.classify_name)
    if (mockData.value[index]) {
      mockData.value[index].name = item.classify_name
    }
  })
  getliveOnline()
})
</script>

<template>
  <div>
    <PublicSearch type="宣传活动" />
    <PublicSearchDialog type="宣传活动" />

    <div class="px-40">
      <div class="bg-#fff">
        <CommonPageContainer :title="title" :path="routePath">
          <div class="mt-20px flex justify-between">
            <!-- <div class="w-85%" v-if="infoType === 'another'">
                <div class="flex items-center ">
                    <span class="w-8px h-8px bg-#AC8358 inline-block ml-10px "></span>
                    <span class="pl-4 font-extrabold" text="#016738">西安地情</span>
                  </div>
              <PublicList></PublicList>
              <PublicPagination :page-size="queryParams.pageSize" :page-num="queryParams.pageNum" :total="total"
                @change="onPageChange" />
            </div> -->

            <div v-if="infoType !== 'more'" class="w-85%">
              <div v-for="(item, index) in mockData" :key="index" class="w-100%">
                <div class="h-40px flex items-center justify-between pr-30px">
                  <div class="flex items-center">
                    <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#016738">{{ item.name }}</span>
                  </div>
                  <div class="flex cursor-pointer" @click="typeClick(item.name, 'more')">
                    <div class="h-20px">
                      更多
                    </div>
                    <img class="ml-5px mt-1px h-22px" src="/img/more.png" alt="">
                  </div>
                </div>
                <div>
                  <div v-if="item.name === '知识竞答' || item.name === '在线直播'">
                    <div v-if="item.data && item.data.length" class="grid grid-cols-2 w-100% gap-3 pr-20px">
                      <div
                        v-for="(e, index) in item.data" :key="index" class="cursor-pointer"
                        @click="toDetailnew(e.activity_no || e.no || e.Id, item.name, item)"
                      >
                        <div style="position: relative;margin-bottom: 20px;border-radius: 4px;">
                          <img :src="e.url" alt="" style="width: 100%;height: 250px;border-radius: 4px;">
                          <span
                            style="position: absolute;bottom: 0;left: 0;z-index: 10;background-color: #F7F9FD ;display: block;width: 100%;font-size: 18px;text-align: center;border-radius: 2px;"
                          >{{
                            e.title }}</span>
                        </div>
                      </div>
                    </div>

                    <div v-else>
                      <el-empty :image-size="150" />
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="item?.data && item?.data.length">
                      <PublicList :list="item.data" @click-item="toDetail" />
                    </div>
                    <div v-else>
                      <el-empty :image-size="150" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="infoType === 'more'" class="w-85%">
              <div class="w-100%">
                <div class="h-40px flex justify-between pr-30px">
                  <div class="flex items-center">
                    <div class="mb-20px flex items-center py-5">
                      <div
                        class="h-40px w-40px flex cursor-pointer items-center justify-center rounded-md" :style="bg1"
                        @click="backInit"
                      >
                        <div class="h-18px w-18px flex items-center justify-center rounded-50% bg-#fff">
                          <span class="flex items-center -ml-2px" text="#AC8358">&lt;</span>
                        </div>
                      </div>
                      <span class="pl-4 font-extrabold" text="#016738">{{ currentName }}</span>
                    </div>
                    <!-- <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#016738">{{ currentName }}</span> -->
                  </div>
                </div>
                <div>
                  <div v-if="currentName === '知识竞答' || currentName === '在线直播' || currentName === '问卷调查'">
                    <div v-if="currentName === '知识竞答' || currentName === '问卷调查'">
                      <div v-if="currentList && currentList.length" class="grid grid-cols-1 w-100% gap-3 pr-20px">
                        <div
                          v-for="(e, index) in currentList" :key="index"
                          hover="shadow scale-101"
                          class="w-100% cursor-pointer transition-all"
                        >
                          <div
                            class="h-150px w-100% flex flex rounded-10 rounded-6px bg-#F7F9FD"
                            style="margin-bottom: 20px;border-radius: 4px;"
                            @click="toDetailnew(e.activity_no, currentName, e)"
                          >
                            <div class="h-150px w-20% flex">
                              <img :src="e.url" alt="">
                            </div>
                            <div class="ml-20px flex flex-col justify-between p-20px">
                              <div>{{ e.title }}</div>
                              <div style="color:red">
                                {{ e.status }}
                              </div>
                              <div>{{ e.time }}</div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div v-else>
                        <el-empty :image-size="150" />
                      </div>
                    </div>

                    <div v-if="currentName === '知识竞答'">
                      <PublicPagination
                        :page-size="queryParams.page.rownumber" :page-num="queryParams.page.pageNo"
                        :total="total" @change="onPageChange"
                      />
                    </div>
                    <div v-if="currentName === '在线直播'">
                      <div v-if="onlivedata && onlivedata.data && onlivedata.data.length" class="w-100% pr-20px">
                        <div v-for="(e, index) in onlivedata.data" :key="index">
                          <div style="position: relative;margin-bottom: 20px;border-radius: 4px;">
                            <!-- <img :src="e.url" alt="" style="width: 100%;height: 250px;border-radius: 4px;">
                          <span style="position: absolute;bottom: 0;left: 0;z-index: 10;background-color: #F7F9FD ;display: block;width: 100%;font-size: 18px;text-align: center;border-radius: 2px;">{{ e.title }}</span> -->
                            <!-- <video :src="e.stream_url" /> -->
                            <iframe class="h-400px w-100%" :src="e.stream_url" frameborder="0" />
                          </div>
                        </div>
                      </div>
                      <div v-else>
                        <div>
                          <img src="/img/nodata.jpg" alt="">
                        </div>
                      </div>
                    </div>
                    <!-- <div v-if="currentName === '在线直播' && onlivedata && onlivedata.data && onlivedata.data.length">
                      {{ onlivedata && onlivedata.data && onlivedata.data.length }}
                        <PublicPagination
                          :page-size="10" :page-num="currentOnlivepagenum" :total="onlivedata.page.total"
                          @change="onPageChange"
                        />
                    </div> -->
                  </div>
                  <div v-else>
                    <div v-if="currentList && currentList.length">
                      <PublicList :list="currentList" @click-item="toDetail" />
                    </div>
                    <div v-else>
                      <el-empty :image-size="150" />
                    </div>
                    <div>
                      <PublicPagination
                        :page-size="queryParams.page.rownumber" :page-num="queryParams.page.pageNo"
                        :total="total" @change="onPageChange"
                      />
                    </div>
                  </div>
                  <!-- <div v-if="currentName === '在线直播'&& onlivedata && onlivedata.data && onlivedata.data.length"  >
                    <PublicPagination
                      :page-size="10" :page-num="currentOnlivepagenum" :total="onlivedata.data.page.total"
                      @change="onPageChange"
                    /> -->
                  <!-- </div> -->
                </div>
                <div v-if="currentName == '在线直播'" class="flex flex-col justify-between pr-30px">
                  <div class="flex items-center py-20px">
                    <span class="ml-10px inline-block h-8px w-8px bg-#AC8358" />
                    <span class="pl-4 font-extrabold" text="#016738">历史回放</span>
                  </div>
                  <div>
                    <div v-if="currentList && currentList.length" class="grid grid-cols-2 w-100% gap-3 pr-20px">
                      <div v-for="(e, index) in currentList" :key="index">
                        <div
                          style="position: relative;margin-bottom: 20px;border-radius: 4px;"
                          @click="toDetailnew(e.no || e.Id, currentName, e)"
                        >
                          <img :src="e.url" alt="" style="width: 100%;height: 250px;border-radius: 4px;">
                          <span
                            style="position: absolute;bottom: 0;left: 0;z-index: 10;background-color: #F7F9FD ;display: block;width: 100%;font-size: 18px;text-align: center;border-radius: 2px;"
                          >{{
                            e.title }}</span>
                        </div>
                      </div>
                    </div>

                    <div v-else>
                      <el-empty :image-size="150" />
                    </div>
                    <div>
                      <PublicPagination
                        :page-size="queryParams.page.rownumber" :page-num="queryParams.page.pageNo"
                        :total="total" @change="onPageChange"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="w-15%">
              <!-- <div v-if="currentName" style="position: fixed;top :-120px;left:0" class="cursor-pointer" @click="backInit">
                < &nbsp;返回
              </div> -->
              <div>
                <div class="h-10px flex items-center rounded-tl rounded-tr px-10px py-5px" :style="bg1" />
                <div class="rounded-bl rounded-br" border="2px solid #AC8358">
                  <div
                    v-for="(item, index) in mockData" :key="index" class="flex cursor-pointer items-center p-2 pl-10"
                    :style="currentName === item.name ? infocss : ''" @click="typeClick(item.name, 'more')"
                  >
                    <!-- <i
                      v-if="currentName === item.name"
                      class="i-ri:arrow-right-circle-line h-25px w-25px cursor-pointer text-#AC8358"
                    /> -->
                    <img
                      v-if="currentName === item.name" src="/img/right-f.png" alt="" class="pr-5px"
                      style="flex-shrink: 0;width: 25px;height: 24px;"
                    >
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div v-if="siderData && siderData.length" class="mt-20px">
                <div class="h-30px flex items-center rounded-tl rounded-tr px-10px py-5px" :style="bg1">
                  <img src="/img/tj.png" alt="">
                  <div class="pl-15px" text="#fff 16px">
                    推荐
                  </div>
                </div>
                <div
                  v-if="siderData && siderData.length" class="rounded-bl rounded-br px-10px py-5px"
                  border="2px solid #AC8358"
                >
                  <div
                    v-for="item in siderData" :key="item.id" class="cursor-pointer"
                    @click="godetaillast(item.id, currentName ? currentName : '推荐')"
                  >
                    <img
                      :src="getImgUrl(item.activity_image || item.cover_file_name, true)" alt=""
                      style="width:100%;height: 124px;object-fit: cover;"
                    >
                    <div class="cursor-pointer py-10px hover:text-#AC8358" text="14px">
                      {{ item.title_name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CommonPageContainer>
      </div>
    </div>
  </div>
</template>

<style></style>
